<!DOCTYPE html>
<html lang="ch">
<head>
<!--
	***** ABSTRACT *****
		
		File name: 		   content.html
		Version:           1.0
		Initial author:    Haitao Huang 
		Create date:       23rd March 2016
		Lastest edit:      23rd March 2016
		Description:       this HTML file is used for result content of searching
	 
	***** CONTENT *****
		
		_NULL
-->
	<title>plantSeedImageIndex</title>
	
	<!--meta information of webpage -->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="description" content="a website for searching plant seed image">
	<meta name="keywords" content="plant seed, SCAU">
	
	<!-- temporary blank -->
	<link href="../cssStyle/content_style.css" rel="stylesheet">
	
	<script>
	function alertFun(){
			alert("alert!");
		}
	</script>
</head>
<body>
	<div id = "suspend_bar">
	<!-- form for searching the category of plant -->
	<form id = "" action = "#" method = "get">
	<fieldset>
	<legend>select category of plant:</legend>
		kingdom:&nbsp;
		<select id = "kingdom_drag">
			<option value = "gymnospermae">gymnospermae</option>
			<option value = "angiospermae">angiospermae</option>
		</select>
		&nbsp;&nbsp;class:&nbsp;
		<select id = "class_drag" onfocus = "alertFun()">
		     <option value = "class_1">class_1</option>
			<option value = "class_2">class_2</option>
		</select>
		&nbsp;&nbsp;order:&nbsp;
		<select id = "order_drag" onfocus = "alertFun()">
			<option value = "order_1">order_1</option>
			<option value = "order_2">order_2</option>
		</select>
		&nbsp;&nbsp;family:&nbsp;
		<select id = "family_drag" onfocus = "alertFun()">
			<option value = "family_1">family_1</option>
			<option value = "family_2">family_2</option>
		</select>
		&nbsp;&nbsp;genus:&nbsp;
		<select id = "genus_drag" onfocus = "alertFun()">
			<option value = "genus_1">genus_1</option>
			<option value = "genus_2">genus_2</option>
		</select>
		&nbsp;&nbsp;<input type = "submit" value = "search" onsubmit = "#" onclick = "test()">
		</submit>
	</fieldset>
	</form>
	</div>
	<div id = "foot">
		<a href = "#" target = "blank">link_1</a>
		<a href = "#" target = "blank">link_2</a>
		<a href = "#" target = "blank">link_3</a>
	</div>
	
	<!-- requir the selected value of  -->
	<script>
	function test(){
		var sel = document.getElementById("kingdom_drag");
		alert(sel.options[sel.selectedIndex].value);
	}
	</script>
</body>
</html>